<template>
  <el-pagination
    :current-page="pageOption.current"
    background
    :page-sizes="pageSizes"
    :page-size="pageOption.size"
    :layout="pageLayout"
    :total="total"
    @size-change="onSizeChange"
    @current-change="onPageChange"
  >
  </el-pagination>
</template>
<script>
export default {
  name: 'HaPagination',
  props: {
    pageSizes: {
      type: Array,
      default: () => [2, 5, 10, 15, 20, 30, 50, 100]
    },
    pageLayout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    total: {
      type: Number,
      default: 0
    },
    pageOption: {
      type: Object,
      default: () => ({
        current: 1,
        size: 10
      })
    }
  },
  data: () => ({
    
  }),
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onSizeChange(size) {
      this.pageOption.size = size
      this.$emit('pagination', this.pageOption)
    },
    onPageChange(page) {
      this.pageOption.current = page
      this.$emit('pagination', this.pageOption)
    },
  },
}
</script>
<style lang='scss' scoped>
  
</style>